<template>
	<view>
		<u-navbar title-bold :is-fixed="false" :titleSize="34"  :border-bottom="false" title="详情"
			:background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/202408072106365a0d04602.png) no-repeat',
			backgroundSize:'100%'
		}" title-color="#2F3033">
		</u-navbar>
		<view class="news-details mt30">
			<view class="header">
				<view class="title xxl mb20 font-weight-500 u-padding-left-10">{{ articleDetail.title }}</view>
				<view class="row-between xs u-color-666666">
					<view>发布时间：{{ articleDetail.create_time }}</view>
					<view>{{ articleDetail.visit }}人浏览</view>
				</view>
			</view>
			<view class="main">
				<u-parse :html="article_content" :tag-style="tagStyle" :selectable="true" :show-with-animation="true" :lazy-load="true" />
			</view>
		</view>
		<loading-view v-if="showLoading"></loading-view>
		<comment-area :id="articleDetail.id" :type="1"></comment-area>
		<!--<import src="/wxParse/wxParse.wxml"></import>-->
	</view>
</template>

<script>
	import {
		getHelpArticleDetail
	} from '@/api/new';
	export default {
		data() {
			return {
				showLoading: true,
				articleDetail: {},
				article_content: "",
				tagStyle: {
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.id = options.id;

			this.getHelpArticleDetailFun();
		},


		methods: {
			getHelpArticleDetailFun() {
				getHelpArticleDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.articleDetail = res.data
						//wxParse.wxParse('content', 'html', res.data.content, this, 15)
						setTimeout(() => {
							this.article_content = res.data.content;
						}, 200);
						setTimeout(() => {
							this.showLoading = false
						}, 300);
					}
				});
			},

		},
		onShareTimeline() {
			const {
				articleDetail
			} = this;
			return {
				title: articleDetail.title,
				imageUrl: articleDetail.image,
				path: "pages/news_details/news_details?id=" + this.id + '&type=' + this.type,
			};
		},
		async onShareAppMessage() {
			const {
				articleDetail
			} = this;
			return {
				title: articleDetail.title,
				imageUrl: articleDetail.image,
				path: "pages/news_details/news_details?id=" + this.id + '&type=' + this.type,
			};
		},
	};
</script>
<style lang="scss">
	page {
		background: url('https://resource.lanbaozixun.com/uploads/images/202408072106365a0d04602.png') no-repeat;
		background-size: 100% auto;
		background-color: #F7F7F7;
	}
	
	.news-details{
		position: relative;
		padding-bottom: 40rpx;
		border-radius: 20rpx 50rpx 0 0;
		border: 2px solid rgba(255, 255, 255, 1);
		border-bottom: 0 solid transparent;
		background: linear-gradient(162.85deg, rgba(212, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 47%, rgba(255, 255, 255, 0) 100%);
	}
	
	.news-details::before{
		content: ' ';
		top: 20rpx;
		right: 20rpx;
		width: 200rpx;
		height: 150rpx;
		position: absolute;
		background: url('https://resource.lanbaozixun.com/uploads/images/202408072112563ba405219.png') no-repeat;
		background-size: 100% 100%;
	}

	.news-details .header {
		position: relative;
		padding: 40rpx 30rpx;
	}
	
	.news-details .header::before{
		content: '';
		left: 0;
		width: 16rpx;
		height: 48rpx;
		position: absolute;
		background: #0484FF;
		border-radius: 0 50rpx 50rpx 0;
	}

	.news-details .main {
		padding: 30rpx ;
		border-radius: 15rpx;
		margin: 0 30rpx;
		background: linear-gradient(150.54deg, #FFFFFF 0%, #F6FBFF 10.54%, #FFFFFF 79.05%, #EDF6FF 100%);
		border: 2px solid #CAE5FF;
	}
	
	.title{
		color: #0484FF;
	}

	.wxParse-p image {
		width: 100%;
	}

	.unlock-btn {
		padding: 16rpx 32rpx;
		margin: 40vh auto;
		display: inline-block;
		border-radius: 100rpx;
		color: $-color-primary;
		border: 2rpx solid $-color-primary;
	}
</style>